<template>
  <div class="sub-category">
      <div class="container">
           <!-- 面包屑组件 -->
      <SubBread />
      <!-- 过滤条件 -->
      <SubFilte/>
      </div>
    <div class="goods-list">
          <!-- 排序组件 -->
      <SubSort/>
      <!-- 列表组件 -->
      <SubList/>
    </div>
  </div>
</template>

<script>
import SubBread from './components/sub-bread'// 面包屑导航组件
import SubFilte from './components/sub-filter'// 过滤模板
import SubSort from './components/sub-sort'// 排序组件
import SubList from './components/sub-list'// 列表区域
import { provide, reactive } from 'vue'
export default {
  components: {
    SubBread,
    SubFilte,
    SubSort,
    SubList
  },
  setup () {
    // 使用provide提供额外的请求参数
    const filterData = reactive({
      attrs: [], // 一般商品属性
      sortField: null, // 排序
      brandId: null // 品牌ID
    })
    provide('filterData', filterData)

    // 提供修该数据的方法
    function setsortField (newSort) {
      filterData.sortField = newSort
    }
    provide('setsortField', setsortField)

    // 提供修改品牌ID
    function setBrandId (brandId) {
      filterData.setBrandId = brandId
    }
    provide('setBrandId', setBrandId)
    //   提供修改attrs方法
    function setAttrs (newAttr) {
      const index = filterData.attrs.findIndex((attr) => attr.groupId === newAttr.groupId)
      console.log('查看index', index)
      if (index > -1) {
        //   有重复
        filterData.attrs.splice(index, 1)
      }
      filterData.attrs.push(newAttr)
    }
    provide('setAttrs', setAttrs)
  }
}
</script>

<style>

</style>
